<template>
	<view hover-class="one" hover-start-time="1000" hover-stay-time="3000">
		<view>
			<view hover-stop-propagation hover-class="two" class="iconfont icon-baolingqiu">
				444
			</view>
			<text>333333333</text>
			<button type="default" size="default">2</button>
			<button type="primary" size="mini">2</button>
			<button type="warn" size="mini">2</button>
			<button type="warn" size="mini" loading>2</button>
			<button type="warn" size="mini" disabled="">2</button>
			<button type="warn" size="mini" disabled="">2</button>
			<button type="warn" size="mini" @click="sc">上传图片</button>
			<button type="warn" disabled="">2</button>
		</view>

		<!-- <image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="aspectFill"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="left"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="right"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="aspectFit"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="bottom"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="bottom left"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="bottom right"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="center"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="heightFix"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="widthFix"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="top"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="scaleToFill"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="scaleToFill"></image>
		<image src="https://pic2.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_l.jpg?source=1940ef5c" mode="top rigth"></image>
          <image :src="item" v-for="(item,index) in imageArr" :key="index" @click="zhanshi(item)"></image> -->

		<!-- #ifdef H5 -->
		<view>
			h5页面会显示
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view>
			微信小程序会显示
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view>
			app会显示
		</view>
		<!-- #endif -->

		<!-- 跳转到tabbar页面 -->
		<navigator url="/pages/index/index" open-type="switchTab">
			<button type="default">跳转到关于页面</button>
		</navigator>
		<!-- 跳转到普通页面 -->
		<navigator url="/pages/ptym/ptym" hover-class="navigator-hover">
			<button type="default">跳转到普通页面</button>
		</navigator>

		<!-- 跳转详情页 -->
		<button type="default" @click="goPtym">调整详情页</button>
		<!-- 跳转tabbar -->
		<button type="default" @click="goTabbar">跳转tabbar</button>
		<!-- 销毁在跳转 -->
		<button type="default" @click="goXiaohui">先销毁在跳转</button>
		<test :msg="msg" @myEvent="zichuanfu"></test>
		<aaa :msg='fuchuanzi'></aaa>
		<bbb @myEvent="zichuanfu"></bbb>
	</view>
</template>

<script>
	import aaa from "../../component/aaa.vue"
	import bbb from "../../component/bbb.vue"
	export default {
		components: {
			bbb,aaa
		},
		data() {
			return {
				fuchuanzi:"父传子",
				msg: "子组件传的值",
				imageArr: []
			}
		},
		created() {
			
		},
		methods: {
			zichuanfu(res) {
				console.log(res)
			},
			// 跳转普通页面
			goPtym() {
				uni.navigateTo({
					url: "/pages/ptym/ptym?id=40&name='周杰伦'&age=zs"
				})
			},
			// 跳转tabbar
			goTabbar() {
				uni.switchTab({
					url: "/pages/wode/wode?name='周杰伦'"
				})
			},
			// 销毁在跳转
			goXiaohui() {
				uni.redirectTo({
					url: "/pages/ptym/ptym"
				})
			},
			getList() {
				uni.request({
					url: "http://81.68.69.186:3000/categories",
					success(res) {
						console.log(res)
					}
				})
			},
			// 上传图片
			sc() {
				uni.chooseImage({
					count: 10,
					success: res => {
						this.imageArr = res.tempFilePaths
					}
				})
			},
			zhanshi(current) {
				uni.previewImage({
					urls: this.imageArr,
					current
				})
			},
			// post方法
			login() {
				uni.request({
					url: "http://81.68.69.186:3000/login",
					data: {
						email: "123456@qq.cn",
						password: "123456"
					},
					method: "post",
					success(ret) {
						console.log(ret)
						if (ret.statusCode == 200) {
							uni.setStorage({
								key: "name",
								data: ret.data.nickName,
								success() {
									console.log("存储成功")
								}
							})
						}
					}
				})
			}
		},
		// 触发
		onReady() {
			this.getList()
			this.login()
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.getStorage({
				key: "name",
				success: res => {
					console.log(res)
				}
			})
			console.log("下拉刷新")
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		// 触底刷新
		onReachBottom() {
			uni.removeStorage({
				key: "name",
				success(res) {
					console.log("删除成功")
				}
			})
			console.log("触底刷新")
		},
		onUnload() {
			console.log("销毁了")
		},
		onHide() {
			console.log("页面隐藏了")
		},
		onShow() {
			console.log("页面显示了")
		},
		onReady() {
			console.log("初次加载了")
		}
	}
</script>

<style lang="less">
	@import url("./a.css");
	@import url("~@/static/fonts/iconfont.css");

	.one {
		width: 300rpx;
		background-color: #007AFF;

		.two {
			width: 100rpx;
			background-color: #4CD964;
		}
	}
</style>
